<template>
  <div class="vision_container" style="width: 1650px; height: 750px">
    <div class="row" style="height: calc(50% - 33px); width: 100%; display: flex; justify-content: space-between">
      <div style="width: calc(50% - 10px); height: 100%">
        <Echart1></Echart1>
      </div>
      <div style="width: calc(50% - 10px); height: 100%">
        <Echart2></Echart2>
      </div>
    </div>
    <div class="row" style="height: calc(50% - 33px); width: 100%; display: flex; justify-content: space-between; margin-top: 15px;">
      <div style="width: calc(50% - 10px); height: 100%">
        <Echart3></Echart3>
      </div>
      <div style="width: calc(50% - 10px); height: 100%">
        <Echart4></Echart4>
      </div>
    </div>
  </div>
</template>

<script>
  import Echart1 from './components/Echart1'
  import Echart2 from './components/Echart2'
  import Echart3 from './components/Echart3'
  import Echart4 from './components/Echarts4'
  export default {
    name: 'panorama',
    components: {
      Echart1,
      Echart2,
      Echart3,
      Echart4
    },
    mounted() {
      this.setScale()
      window.addEventListener('resize', () => {
        this.setScale()
      })
    },
    methods:  {
      setScale() {
        let bodyWidth;
        let bodyHeight;
        if (process.env.NODE_ENV === "development") {
          document.querySelector(".el-card__body").style.overflow = "hidden"
          bodyWidth = document.querySelector(".el-card__body").clientWidth - 30;
          bodyHeight = document.querySelector(".el-card__body").clientHeight - 38;
        }
        if (process.env.NODE_ENV === 'production') {
          document.querySelector("body").style.overflow = "hidden"
          bodyWidth = document.querySelector("body").clientWidth;
          bodyHeight = document.querySelector("body").clientHeight;
        }
        let vision_containerEl = document.querySelector('.vision_container')
        let visionWidth = vision_containerEl.scrollWidth
        let visionHeight = vision_containerEl.scrollHeight
        vision_containerEl.style.transform = `scale(${bodyWidth / visionWidth}, ${bodyHeight / visionHeight})`
      }
    }
  }
</script>

<style lang="scss">
  body {
    overflow-y: hidden;
  }
  .vision_container {
    transform-origin: left top;
    .chart_container {
      margin-top: 10px;
      box-shadow: 0px 0px 4px 0px rgba(56,76,99,0.20);
      background-color: rgba(255,255,255, 0.5);
      .echart {
        height: 100%;
        width: 100%;
      }
    }
  }

  .triangleBottom {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: -9px;
      width: 0;
      border: 5px solid;
      left: 50%;
      transform: translateX(-50%);
      border-color: #4c9af8 transparent transparent transparent;
    }
  }

  .triangleBottom.colorFF7B83 {
    &:after {
      border-color: #FF7B83 transparent transparent transparent;
    }
  }

  .triangleBottom.color2FC25B {
    &:after {
      border-color: #2FC25B transparent transparent transparent;
    }
  }
</style>
